<template>
  <div id="Company_drugs_add">
    <span>
      <img src="../assets/medicine.png" alt="" class="bread-icon">
    </span>
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">药品管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">药品添加</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">药品添加</span>
        <!-- <span class="navRight">
          <el-button size="small" @click="dragSearch()">搜索</el-button>
        </span>
        <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容" class="searchInput"></el-input>
        </span> -->
      </div>
      <el-form :model="formData" ref="drugsAdd" :rules="drugs_add_rules">
        <el-form-item label="药品通用名称" :label-width="formLabelWidth" prop="common_name">
          <el-input v-model="formData.common_name" auto-complete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属企业" :label-width="formLabelWidth" prop="enterprise">
          <el-input v-model="formData.enterprise" auto-complete="off" disabled placeholder="所属企业编号"></el-input>
        </el-form-item> -->
        <el-form-item label="生产企业" :label-width="formLabelWidth" prop="factory">
          <el-input v-model="formData.factory" auto-complete="off" placeholder="生产企业编号"></el-input>
        </el-form-item>
        <el-form-item label="批准文号" :label-width="formLabelWidth" prop="approval_number">
          <el-input v-model="formData.approval_number" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="批准文号有效期" :label-width="formLabelWidth" prop="approval_expiry_date">
          <el-date-picker v-model="formData.approval_expiry_date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="药品有效期" :label-width="formLabelWidth" prop="expiry_date_number">
          <el-input v-model.number="formData.expiry_date_number" type="number" min='0' auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="有效期单位" :label-width="formLabelWidth" prop="expiry_date_unit">
          <el-select style="width:220px" v-model="formData.expiry_date_unit" placeholder="有效期单位">
            <el-option label="年" value="year"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="日" value="day"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="剂型" :label-width="formLabelWidth" prop="form">
          <el-input v-model="formData.form" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="制剂规格" :label-width="formLabelWidth" prop="standard">
          <el-input v-model="formData.standard" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div class="btn-group">
        <el-button>取消</el-button>
        <el-button type="primary" @click="createDrug">添加</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogTableVisible: false,
        dialogFormVisible: false,
        adminId: '',
        adminToken: '',
        formData: {
          common_name:"普伐他汀钠片",
          factory:"上海现代制药股份有限公司",
          approval_number:"国药准字 H20163160",
          approval_expiry_date:null,
          form:'片剂',
          expiry_date_number:36,
          expiry_date_unit:'month',
          standard:"20mg"
        },
        formLabelWidth: '130px',
        drugs_add_rules: {
          common_name: [{
            required: true,
            message: '请输入用户名',
            trigger: 'change'
          }, ],
          factory: [{
            required: true,
            message: '请输入生产企业编号',
            trigger: 'change'
          }],
          approval_number: [{
            required: true,
            message: '请输入批准文号',
            trigger: 'change'
          }],
          approval_expiry_date: [{
            required: false,
            message: '请选择有效期',
            trigger: 'change'
          }],
          expiry_date_number: [
            {
              required: true,
              type: 'number',
              message: '有效期必须为数字值',
            }
          ],
          expiry_date_unit: [{
            required: true,
            message: '请选择有效期单位',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      createDrug(row) {
        const that = this;
        this.$refs['drugsAdd'].validate((valid) => {
          if (valid) {
            that.$http({
              url: '/drugs/',
              headers: {
                'Authorization': 'Token ' + this.$store.getters.getInfo.token
              },
              method: 'post',
              data: that.formData
            }).then(
              response => {
                console.log(response)
                if (response.status == 201) {
                  that.formData = {};
                  that.$refs['drugsAdd'].resetFields();
                  that.$message({
                    showClose: true,
                    message: '创建成功',
                    type: 'success'
                  })
                }
              }
            ).catch(error => {
              console.log(error.response)
              if (error.response.status == 401) {
                this.$message({
                  message: error.response.data.detail,
                  type: 'warning'
                })
                this.$router.push({
                  path: '/login'
                });
              } else if (error.response.status == 400) {
                this.$message({
                  message: '创建失败',
                  type: 'error'
                })
              } else {
                this.$message({
                  message: error.response.data.detail,
                  type: 'warning'
                })
              }
              console.log(error);
            });

          }
        })
      }
    },
    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.formData.enterprise = this.$store.getters.getInfo.enterprise
      this.$http({
        url: '/drugs/',
        // url: '/drugs/'+adminId +'/',
        method: 'get',
        headers: {
          'Authorization': 'Token ' + this.adminToken
        },
        data: {
          page: 1,
          form: '',
          enterprise_id: this.adminId,
          search: '',
          ordering: ''
        }
      }).then(
        response => {
          //success
          console.log(response)
          this.tableData = response.data.results
        }
      ).catch(error => {
        console.log(error.response)
        if (error.response.status == 401) {
          this.$message({
            message: error.response.data.detail,
            type: 'warning'
          })
          this.$router.push({
            path: '/login'
          });
        } else if (error.response.status == 400) {
          this.$message({
            message: 'error400',
            type: 'error'
          })
        } else {
          this.$message({
            message: '未知错误',
            type: 'error'
          })
        }
        console.log(error);
      });
    },
  }

</script>

<style scoped>
  #Company_drugs_add>>>.el-form {
    max-width: 800px;
    margin: 20px auto;
  }

  #Company_drugs_add>>>.el-form-item {
    /* width: 400px; */
    display: inline-block;
    margin: 10px auto;
  }

  #Company_drugs_add>>>.el-form-item__content {
    width: 220px;
  }
  /* #Company_medcode >>> .el-dialog input{
    width: 250px;
} */

</style>
